<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>督情总览</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        .col_title{
            padding: 1rem 0;
            border-bottom: .5rem #f5f3f4 solid;
            text-align: center;
            font-size: 1.4rem;
        }

        .table>tbody>tr>td{
            border-top:none;
            vertical-align: middle;
            text-align: center;
        }
        .table{ font-size: 1.4rem;}
        .table-striped>tbody>.tr_1{ background-color: #deebf4!important;
        color: #06599f; font-weight: 700!important;}
        .circle1,.circle2{
        	position: relative;
		    text-align: center;
		    bottom: 144px;
		    width: 10%;
		    margin: 0 auto;
		    color: #333;
        }
    </style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>督情总览</span>
	</header>
	<div class="content basic" >
	    <p class="col_title">
	        市安全生产监督管理局承办总数合计：<font color="#fe9e23" size="+2">680</font>件
	    </p>
	    <table class="table table-striped">
	        <tr class="tr_1">
	            <td>办件状态</td>
	            <td>数量</td>
	            <td>占比</td>
	        </tr>
	
	        <tr>
	            <td>正常在办</td>
	            <td>550</td>
	            <td>50%</td>
	        </tr>
	
	        <tr>
	            <td>代办状态</td>
	            <td>550</td>
	            <td>50%</td>
	        </tr>
	
	        <tr>
	            <td>催办状态</td>
	            <td>550</td>
	            <td>50%</td>
	        </tr>
	
	        <tr>
	            <td>逾期件数</td>
	            <td>550</td>
	            <td>50%</td>
	        </tr>
	        <tr>
	            <td>办结完成</td>
	            <td>550</td>
	            <td>50%</td>
	        </tr>
	    </table>
	     <div id="main" style="width: 100%;height:250px;" style="top: -50px;"></div>
	     <p class="circle1">办件成效</p>
	     <div id="main2" style="width: 100%;height:250px;" style="top: -50px;"></div>
	     <p class="circle2">领导评价</p>
	</div>
	<script type="text/javascript" src="js/echarts.min.js" ></script>
	<script>
		 var myChart = echarts.init(document.getElementById('main'));
		 var myChart2 = echarts.init(document.getElementById('main2'));
		 var option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'horizontal',
		        x: 'center',
		        y:'bottom',
		        data:['优秀','合格','不合格']
		    },
		    color:['#0e88ed', '#1ec0e7','#21b47e'] ,
		    series: [
		        {
		            name:'办件成效',
		            type:'pie',
		            radius: ['20%', '60%'],
		            avoidLabelOverlap: false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false,
		                    textStyle: {
		                        fontSize: '30',
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:335, name:'优秀'},
		                {value:310, name:'合格'},
		                {value:234, name:'不合格'},
		               
		            ]
		        }
		    ]
		};
		var option2 = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'horizontal',
		        x: 'center',
		        y:'bottom',
		        data:['非常满意','满意','基本满意','不满意']
		    },
		    color:['#57b86b', '#ffbe0c','#ff7e0c','#dc4450'] ,
		    series: [
		        {
		            name:'领导成效',
		            type:'pie',
		            radius: ['20%', '60%'],
		            avoidLabelOverlap: false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false,
		                    textStyle: {
		                        fontSize: '30',
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:335, name:'非常满意'},
		                {value:310, name:'满意'},
		                {value:234, name:'基本满意'},
		                {value:234, name:'不满意'},
		            ]
		        }
		    ]
		};
		 myChart.setOption(option);
		 myChart2.setOption(option2);
	</script>
</body>
</html>